{% extends "home/lad-profile-base.html" %}

{% block head %}
	{{block.super}}
    <link rel="stylesheet" type="text/css" href="/static/jcrop/css/jcrop.css">		 
	<script type="text/javascript" src="/static/jcrop/js/jcrop.js"></script> 		     
	<script type='text/javascript'>
		function deleteImage( imageId )
		{
			$.ajax(	
				{
					'url': "/delete-image",
					'data': { 'id': imageId },
					'dataType': "json",
					'success': deleteImageSuccess
				}
			);

		}

		function deleteImageSuccess( data )
		{
			$( '#image-block-' + data[ 'id' ] ).fadeOut( 'slow' );
		}

		function closeThumbnail()
		{
			jcropApi.destroy();

			$.ajax(
				{
					'url': "/save-thumbnail",
					'data':	{
								'image_id': imageId,
								'x': x,
								'y': y,
								'size': size
							},
					'dataType': "json"
				}
			);
		}


		var cropId = "thumbnail-" + "{{lad.id}}";
		
		function preview(coords)
		{
			var rx = 260 / coords.w;
			var ry = 260 / coords.h;
		
			$( '#' + cropId ).css({
				width: Math.round(rx * imageWidth) + 'px',
				height: Math.round(ry * imageHeight) + 'px',
				marginLeft: '-' + Math.round(rx * coords.x) + 'px',
				marginTop: '-' + Math.round(ry * coords.y) + 'px'
			});
		}

		

		var imageWidth;
		var imageHeight;
		var size;
		var x;
		var y;
		var ladId;		
		
		function onSelect( coords )
		{
			x = coords.x;
			y = coords.y;
			size = coords.w;
			preview( coords );
		}
			
		var jcropApi;		
		var img;
		
		function initFrame()
		{
			imageWidth = img.width();
			imageHeight = img.height();

			if( imageWidth > imageHeight )
						{
							size = imageHeight;
							x = ( imageWidth - imageHeight ) / 2;
							y = 0
						}
						else
						{
							size = imageWidth;
							x = 0;
							y = ( imageHeight - imageWidth ) / 2;
						}

			img.Jcrop(
				{
					onSelect: onSelect,
					onChange: preview,
					setSelect:   [	x, 
									y, 
									x + size, 
									y + size ],
					aspectRatio: 1
				},
				function()
				{
					jcropApi = this;
				}
			);
		}
		
		var imageId;
		
		function editPhoto( imgId, url )
		{
			img = $( '<img src="' + url + '">' );
			$( '#' + cropId ).attr( 'src', url );			

			imageId = imgId;
			
			$.fancybox( img, {	
												'afterClose': closeThumbnail,
												'afterShow': initFrame,
												'fitToView': true, 'scrolling': "no", 
												'helpers' : 
												{
													'overlay' : 
													{
														'locked' : false
													} 
												} 
											} );

			/*var img = $( '#image' );
			var imgSrc = successData[ 'url' ];

			//setTimeout( function() { alert( "imgSrc=" + imgSrc ); }, 500 );
        	img.attr( 'src', imgSrc );
		
			imageWidth = successData[ 'width' ];
			imageHeight = successData[ 'height' ];
		
			if( imageWidth > imageHeight )
			{
				size = imageHeight;
				x = ( imageWidth - imageHeight ) / 2;
				y = 0
			}
			else
			{
				size = imageWidth;
				x = 0;
				y = ( imageHeight - imageWidth ) / 2;
			}
	
			img.css( 'width', String( imageWidth ) + "px" );
			img.css( 'height', String( imageHeight ) + "px" );
	
			// insert item
			var item = $( '#item-template' ).clone();
			var profile = successData[ 'profile' ];
			item.removeAttr( 'id' );
			cropId = "thumbnail-" + successData[ 'id' ];
			item.find( 'img' ).attr( 'id', cropId );
			item.find( 'img' ).attr( 'src', imgSrc );
			item.find( 'img' ).attr( 'onclick', "showPhotos(" + successData[ 'id' ] + ")" );
			var aNameSurname = item.find( 'a.name_surname' );
			aNameSurname.html( profile[ 'name_surname' ] );
			aNameSurname.attr( 'href', "/" + successData[ 'slug' ] );
			item.find( 'span.career' ).html( profile[ 'career' ] );
			item.show();
			$( '#item-container' ).prepend( item );
	
			// show adjustins		
						
			img.Jcrop(
				{
					onSelect: onSelect,
					onChange: preview,
					setSelect:   [	x, 
									y, 
									x + size, 
									y + size ],
					aspectRatio: 1
				},
				function()
				{
					jcropApi = this;
				}
			);		*/
		}

	</script>
{% endblock %}

{% block image %}
	{% include "home/item.html" with id=lad.id slug=lad.slug name_surname=lad.name_surname career=lad.get_career_display img_src=lad.thumbnail_url %}
{% endblock %}

{% block images %}
	{% for image in images %}
		<div id='image-block-{{image.id}}' style='overflow: hidden; float: left; margin: 15px 15px 15px 0px; -moz-box-shadow: 5px 2px 7px rgba(0,0,0,0.5); -webkit-box-shadow: 5px 2px 7px rgba(0,0,0,0.5); box-shadow: 5px 2px 7px rgba(0,0,0,0.5);'>
			<a href='#!/static/user/{{image.image}}' class='fancybox' rel='group' onclick='editPhoto( {{image.id}}, "/static/user/{{image.image}}" )'>
				<img src='/static/user/{{image.image}}' style='height: 100px'>
			</a>
			<a href='#delete' onclick='deleteImage( {{image.id}} )'>Delete</a>
		</div>
	{% endfor %}
{% endblock %}

{% block container_bottom %}<a href='/unhandled/?lad_id={{lad.id}}&next='>Следующая анкета</a>{% endblock %}